<!-- 音乐播放器 -->
<template>
  <div id="play" :class="this.$store.state.musicPlay ? '' : 'play-none'">

    <!-- 显示和隐藏音乐播放器的icon -->
    <i class="play-off" :class="this.$store.state.musicPlay ? ' el-icon-lock' : 'el-icon-unlock'"
       @click="a"></i>

    <div class="playc">
      <!-- 音乐播放按钮、左右切换按钮 -->
      <el-row class="control-left" type="flex" tag="div" align="middle">
        <el-col :span="5">
          <i class="icon el-icon-caret-left"></i>
        </el-col>
        <el-col :span="7">
          <i class="icon" :class="music.paused ? 'el-icon-video-play' : 'el-icon-video-pause'" @click="musicPlayOrNot"></i>
        </el-col>
        <el-col :span="5"><i class="icon el-icon-caret-right"></i></el-col>
        <el-col :span="7">

          <!-- 音乐图片 -->
          <a href="#">
            <el-image :src="img" style="width: 60px; height: 60px" fit="fill"></el-image>
          </a>
        </el-col>
      </el-row>

      <!-- 歌名，时长，音乐播进度条 -->
      <div class="control-bar">
        <div>
          <span>{{ music.name }}</span>
          <span>{{ this.music.currentTime | getMuicTime }} / {{ music.duration | getMuicTime }}</span>
        </div>

        <!-- 音乐播放进度条 -->
        <div>
          <el-slider v-model="music.currentTImeHundred" :show-tooltip="false"
              @change="changeCurrentTime"></el-slider>
<!--          <el-progress :percentage="10" color="#409EFF" :show-text="false"></el-progress>-->
        </div>
      </div>

      <!-- 音乐播放设置 -->
      <div class="control-right">

        <!-- 音量调节 -->
        <el-popover placement="left" trigger="hover" :width="150">
          <el-slider v-model="music.volumeHundred" width="200px" @input="changeMusicVolume"></el-slider>
          <i slot="reference" class="i-base iconfont" :class="music.muted ? 'icon-thirdmute' : 'icon-thirdsound-max'"
             @click="music.muted = !music.muted"></i>
        </el-popover>

        <!-- 列表循环，单曲循环，随机循环 -->
        <el-popover placement="top" trigger="hover">
          <ul class="loop">
            <li class="iconfont" v-for="(item, index) of loop" :class="{'clbg': index === loopIndex}"
                @click="loopIndex = index">
              <i :class="item.class" :key="index"></i> {{ item.text }}
            </li>
          </ul>
          <i slot="reference" class="i-base iconfont" :class="loop[loopIndex].class"></i>
        </el-popover>

        <!-- 下载 -->
        <i class="i-base el-icon-download"></i>

        <!-- 音乐列表 -->
        <i class="i-base el-icon-s-operation"></i>
      </div>

    </div>

    <audio :src="audio" ref="msg" @ended="music.paused = true" @canplaythrough="getMusicDuration"></audio>

  </div>
</template>

<script>
import img from '../public/img/轮播/lunbo1.jpeg';
import audio from '../public/music/msg1.mp3';

export default {
  name: "MusicPlay",

  mounted () {
    // 获得音频元素
    this.myAudio = this.$refs.msg;

    this.interval = this.returnInterval();
  },

  data () {
    return {
      // 歌曲图片
      img,
      audio,

      myAudio: null,

      music: {
        name: '李白',
        duration: NaN, // 整个媒体文件的播放时长 s
        paused: true, // 被暂停
        ended: false, // 播放完毕
        error: 'error', // 发生错误返回的信息
        loop: false, // 循环播放
        currentTime: 0, // 以s为单位返回从开始播放到现在所用的时间
        currentTImeHundred: 0, // 从开始播放到现在所用的时间所占比例 0-100
        volume: 0.5, // 音量大小 0.0-1.0
        volumeHundred: 50, // 音量大小 0-100
        muted: false, // 静音
      },

      volumeOff: false, // 音量关闭

      // 循环播放设置信息数组
      loop: [
        { class: 'icon-thirdziyuan', text: '列表循环' },
        { class: 'icon-thirdxunhuan', text: '单曲循环' },
        { class: 'icon-thirdxunhuan1', text: '随机循环' },
      ],

      loopIndex: 0, // 循环播放设置下标
      interval: null, // 定时器
    }
  },

  methods: {
    a () {
      this.$store.commit('changeMusicPlay', !this.$store.state.musicPlay);
    },

    // 每过一秒获得已播放的时间，并更新音乐播放进度条
    returnInterval () {
      return setInterval(() => {
        this.music.currentTime = this.myAudio.currentTime;

        // 如果音乐总时长已获得
        if (this.music.duration) {
          // 更新音乐播放进度条
          this.music.currentTImeHundred = parseInt(this.music.currentTime / this.music.duration * 100);
        }
      }, 1000)
    },

    // 控制音乐播放与否
    musicPlayOrNot () {
      if (this.myAudio.paused) {
        this.myAudio.play();

        // 设置定时器
        this.interval = this.returnInterval();
      } else {
        this.myAudio.pause();

        // 清除定时器
        clearInterval(this.interval);
        this.interval = null;
      }

      this.music.paused = this.myAudio.paused;
    },

    changeCurrentTime () {
      // 获得用户跳转到某时长所占的总时长的比例
      let percent = this.music.currentTImeHundred / 100;

      // 将音频跳转到用户所想跳转的位置
      this.music.currentTime = this.music.duration * percent;
      this.myAudio.currentTime = this.music.duration * percent;
    },

    // 更改音频的音量
    changeMusicVolume () {
      this.myAudio.volume = this.music.volumeHundred / 100;

      if (this.music.volumeHundred !== 0) {
        this.music.muted = false;
        this.myAudio.muted = false;
      } else {
        this.music.muted = true;
        this.myAudio.muted = true;
      }
    },

    // 获得音乐时长
    getMusicDuration () {
      this.music.duration = this.myAudio.duration;
    },
  },

  watch: {
    'music.muted' (newValue) {
      this.music.muted = newValue;
      this.myAudio.muted = newValue;
    },
  },

  filters: {
    // 获得如 3:33 格式的音乐时长
    getMuicTime (value) {
      let min = parseInt(value / 60);
      let s = parseInt(value % 60);

      if (s < 10) {
        return min + ':0' + s;
      }

      return min + ':' + s;
    },
  }

}
</script>

<style lang="less" scoped>
// 自定义类
.clbg {
  color: white;
  background-color: #409EFF;
}

// 隐藏播放器的类，将播放器移动出视图
.play-none {
  transform: translate(0px, 80px);
  transition: all 1s linear 0s;
}

//音乐播放器
#play {
  position: fixed;
  width: 100%;
  height: 80px;
  bottom: 0;
  background: #909399;
  z-index: 100;

  .playc {
    width: 900px;
    height: 80px;
    margin: 0 auto;
  }
}

//显示和隐藏音乐播放器的icon
.play-off {
  display: inline-block;
  position: absolute;
  bottom: 60px;
  left: 1350px;
  padding: 10px;
  color: lightgray;
  background-color: #909399;
  font-size: 20px;
  border-radius: 20px;
  cursor: pointer;

  &:hover {
    color: white;
  }
}


.control-left, .control-bar, .control-right {
  display: inline-block;
  box-sizing: border-box;
  padding: 10px 0;
  overflow: hidden;
}

//音乐播放按钮、左右切换按钮
.control-left {
  width: 280px;
  height: 80px;
  //background-color: red;
  line-height: 80px;

  .icon {
    color: lightgray;
    cursor: pointer;

    &:hover {
      color: white;
      border-color: white;
    }
  }

  .el-icon-caret-left, .el-icon-caret-right {
    border: 3px solid lightgray;
    font-size: 36px;
    border-radius: 22px;
  }

  .el-icon-video-pause, .el-icon-video-play{
    font-size: 60px;
  }

  .el-image {
    margin-left: 20px;
  }

}

.control-bar {
  padding-right: 10px;
  padding-left: 20px;
  width: 400px;
  height: 80px;
  color: lightgray;
  //background-color: blue;

  // 歌名，时长
  div:first-child {
    span:last-child {
      float: right;
    }
  }

  // 音乐播放进度条
  div:last-child {
    margin-top: 10px;
  }

}

.control-right {
  padding-left: 20px;
  width: 200px;
  height: 80px;
  //background-color: greenyellow;
  line-height: 60px;

  .i-base {
    margin-left: 15px;
    color: lightgray;
    font-size: 20px;
    cursor: pointer;

    &:hover {
      color: white;
    }
  }

}

//列表循环，单曲循环，随机循环
.loop {
  padding: 0;
  list-style: none;

  li {
    margin: 5px 0;
    padding: 5px;
    text-align: center;
    cursor: pointer;
  }

  li:hover {
    color: white;
    background-color: #409EFF;
  }
}

</style>